<!DOCTYPE html>
<html>
<head>
    <title>Get location and radius</title>
    <link rel="stylesheet" href="../leaflet/leaflet.css" />
    <link rel="stylesheet" href="../leaflet/css/main.css" />
    <link rel="stylesheet" href="../leaflet/css/MarkerCluster.css" />
    <link rel="stylesheet" href="../leaflet/css/MarkerCluster.Default.css" />
</head>
<body>
    <div id="map-container">
        <div id="map"></div>
    </div>
    <div id="sidebar">
        <div id="coordinates" class="sidebar-stats">Coordinates<br>&nbsp; Latitude: 0<br>&nbsp; Longitude: 0</div>
        <input type="range" id="distance-slider" min="100" max="4000" value="500" step="100" oninput="updateDistance(this.value)">
        <div id="distance-label">Radius: 500 meters</div>
        <button onclick="addMarker()">Add Marker</button>
    </div>

    <script src="../leaflet/leaflet.js"></script>
    <script src="../leaflet/js/leaflet.markercluster.js"></script>
    <script>
        const map = L.map('map').setView(["51.51", "-0.15"], 15); // Set initial map view
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        // Calculate the center of the map-container div
        const mapContainer = document.getElementById('map-container');
        let centerLatLng = map.containerPointToLatLng([mapContainer.offsetWidth / 2, mapContainer.offsetHeight / 2]);

        // Array to store markers
        const markers = [];

        // Function to reposition the marker when the map is moved
        function updateMarker() {
            centerLatLng = map.containerPointToLatLng([mapContainer.offsetWidth / 2, mapContainer.offsetHeight / 2]);
            marker.setLatLng(centerLatLng);
            // Update coordinates in the sidebar
            updateCoordinates({ latlng: centerLatLng });
        }

        // Function to update coordinates in the sidebar
        function updateCoordinates(e) {
            const coordinatesElement = document.getElementById('coordinates');
            coordinatesElement.innerHTML = "Coordinates<br>&nbsp; Latitude: " + e.latlng.lat.toFixed(5) + "<br>&nbsp; Longitude: " + e.latlng.lng.toFixed(5);
        }

        // Add marker to the center of the map-container div
        const marker = L.marker(centerLatLng).addTo(map);

        // Update marker position when map is moved
        map.on('move', updateMarker);

        // Function to handle slider input change
        function updateDistance(value) {
            const distanceLabel = document.getElementById('distance-label');
            distanceLabel.textContent = "Radius: " + value + " meters";
            // Update circle radius
            map.eachLayer(function(layer) {
                if (layer instanceof L.Circle) {
                    layer.setRadius(parseInt(value));
                }
            });
        }

        // Function to add a new marker to the map
        function addMarker() {
            // Add marker at the center of the map
            const newMarker = L.marker(map.getCenter()).addTo(map);
            markers.push(newMarker);

            // Draw line between markers
            if (markers.length > 1) {
                const prevMarker = markers[markers.length - 2];
                const distance = prevMarker.getLatLng().distanceTo(newMarker.getLatLng());
                const line = L.polyline([prevMarker.getLatLng(), newMarker.getLatLng()], { color: 'red' }).addTo(map);
                const tooltip = L.tooltip({ permanent: true, direction: 'right', className: 'marker-tooltip' })
                    .setContent(distance.toFixed(2) + " meters")
                    .addTo(map);
                // Position tooltip at the middle of the line
                const middleLatLng = L.latLngBounds([prevMarker.getLatLng(), newMarker.getLatLng()]).getCenter();
                tooltip.setLatLng(middleLatLng);
            }

            // Add circle to show radius
            const circle = L.circle(map.getCenter(), {
                color: 'blue',
                fillColor: 'blue',
                fillOpacity: 0.3,
                radius: parseInt(document.getElementById('distance-slider').value)
            }).addTo(map);
            // Update coordinates in the sidebar
            updateCoordinates({ latlng: map.getCenter() });
        }

        // Function to clear all markers and lines from the map
        function clearMarkers() {
            markers.forEach(function(marker) {
                map.removeLayer(marker);
            });
            markers.length = 0; // Clear markers array
            map.eachLayer(function(layer) {
                if (layer instanceof L.Polyline || layer instanceof L.Tooltip || layer instanceof L.Circle) {
                    map.removeLayer(layer);
                }
            });
        }
    </script>
</body>
</html>
